<template v-if="show">
	<div>
		<div id="container" class="container"></div>
	</div>
</template>

<script>
	import AMapLoader from "@amap/amap-jsapi-loader";
	window._AMapSecurityConfig = {
		// 安全密钥
		securityJsCode: "8edcf123e71969d233dca5a9b13657f0",
	};
	export default {
		name: "TestIndex",
		data() {
			return {
				// 地图实例
				map: null,
				// 标记点
				marker: "",
				show: true,
				// 地址逆解析
				geoCoder: null,
				// 搜索提示
				AutoComplete: null,
				// 搜索关键字
				keywords: "",
				// 位置信息
				form: {
					lng: 0,
					lat: 0,
					address: "",
					adcode: "", //地区编码
					addressName: ""
				},
				// 搜索节流阀
				loading: false,
				// 搜索提示信息
				options: [],
				geocoder: null
			};
		},
		methods: {
			submitForm() {
				this.$emit('confirm', this.form);
			},
			cancel() {
				this.$emit('cancel');
			},
			initMap(param) {
				AMapLoader.load({
						// 你申请的Key
						key: "55f2ff51aeca19a345dead256aae7b19",
						// key: "27a92ead602037ed55f620e495c0f78c",
						version: "2.0",
						// 需要用到的插件
						plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
					})
					.then((AMap) => {
						this.map = new AMap.Map("container", {
							viewMode: "3D", //是否为3D地图模式
							zoom: 16, //初始化地图级别
							center: [param.lng, param.lat], //初始化地图中心点位置
						});

						this.form = param
						//地址逆解析插件
						this.geoCoder = new AMap.Geocoder({
							city: "010", //城市设为北京，默认：“全国”
							radius: 1000, //范围，默认：500
						});
						this.setMapMarker();
						// 搜索提示插件
						this.AutoComplete = new AMap.AutoComplete({
							city: "全国"
						});
						//点击获取经纬度;
						this.map.on("click", (e) => {
							// 获取经纬度
							this.form = {
								lng: e.lnglat.lng,
								lat: e.lnglat.lat
							};
							// 清除点
							this.removeMarker();
							// 标记点
							this.setMapMarker();
						});
					})
					.catch((err) => {
						// 错误
						console.log(err);
					});
			},
			setMapMarker() {
				this.map.setFitView();
				// 检查标记点是否已经存在
				if (this.marker) {
					this.map.remove(this.marker);
					// 更新现有标记点的位置
					this.marker.setPosition(new AMap.LngLat(this.form.lng, this.form.lat));
				} else {
					// 创建新的标记点
					this.marker = new AMap.Marker({
						map: this.map,
						position: new AMap.LngLat(this.form.lng, this.form.lat),
					});
				}
				// 逆解析地址
				this.toGeoCoder();


				this.map.add(this.marker);
				// 自动适应显示想显示的范围区域
				this.map.setFitView();
			},


			// setMapMarker() {
			//   // 自动适应显示想显示的范围区域
			//   this.map.setFitView();
			//   this.marker = new AMap.Marker({
			//     map: this.map,
			//     position: [this.form.lng, this.form.lat],
			//   });
			//   // 逆解析地址
			//   this.toGeoCoder();
			//   this.map.setFitView();
			//   this.map.add(this.marker);
			// },
			// 清除点
			removeMarker() {
				if (this.marker) {
					this.map.remove(this.marker);
				}
			},
			// 逆解析地址
			toGeoCoder() {
				let lnglat = [this.form.lng, this.form.lat];
				this.geoCoder.getAddress(lnglat, (status, result) => {
					if (status === "complete" && result.regeocode) {
						this.form.address = result.regeocode.formattedAddress;
						this.$emit('confirm', this.form);
					}
				});
			},
			// 搜索
			remoteMethod(query) {
				var ts = this;
				if (query !== "") {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						ts.AutoComplete.search(query, (status, result) => {
							this.options = result.tips;
							this.$emit('remoteMethodBack', this.options);
						});
					}, 200);
				} else {
					this.options = [];
					this.$emit('remoteMethodBack', this.options);
				}

			},
			// 选中提示
			currentSelect(val) {
				// 清空时不执行后面代码
				if (!val) {
					return;
				}
				this.form = {
					lng: val.location.lng,
					lat: val.location.lat,
					address: val.district + val.address + val.name,
					adcode: val.adcode
				};
				// 清除点
				this.removeMarker();
				// 标记点
				this.setMapMarker();

			},
		},
		mounted() {
			// this.initMap();
		},
	};
</script>

<style>
	.container {
		width: 100%;
		height: 600px;
	}
</style>